<template>
  <div class="main-page" style="min-width:1366px;">
    <!-- 搜索栏区域 -->
    <el-card class="SearchCard" body-style="padding:0px">
      <el-row>
        <el-col :span="2">
          <div class="SearchTitle">条件搜索栏</div>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="10">
              <div class="SearchLable">搜索关键字</div>
            </el-col>

            <el-col :span="14">
              <div class="SearchLable">
                <el-input placeholder="请输入内容" v-model="queryInfo.srm" clearable @clear="clearEvent"></el-input>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="10">
              <div class="SearchLable">配对状态</div>
            </el-col>

            <el-col :span="14">
              <div class="SearchLable">
                <el-select v-model="queryInfo.match_state" placeholder="请选择">
                  <el-option
                    v-for="item in MatchOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="2">
          <div class="SearchLable">
            <el-button size="medium" type="primary" @click="getSearchList()">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 表单 -->
    <el-card :body-style="{ padding: '0px' }" class="box-card">
      <div class="tableStyle">
        <el-table
          ref="multipleTable"
          class="card-table"
          :data="DiseasematchList"
          tooltip-effect="dark"
          style="font-size: 12px"
          :header-cell-style="{ background: '#3F9DFD', color: '#FFF' }"
          size="medium"
          height="634px"
          stripe
          border
        >
          <el-table-column label="序号" type="index" width="50"></el-table-column>
          <el-table-column label="操作" show-overflow-tooltip width="60">
            <template slot-scope="scope">
              <el-button type="text" @click="EditDiagDiseaseMatch(scope.row.id)">配对</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="zddm" label="医院疾病编码" show-overflow-tooltip width="110" />
          <el-table-column prop="icd" label="医院ICD编码" show-overflow-tooltip width="110" />
          <el-table-column prop="zdmc" label="医院疾病名称" show-overflow-tooltip width="185" />
          <el-table-column prop="mdhsIcdName" label="系统疾病名称" show-overflow-tooltip width="185" />
          <el-table-column prop="mdhsIcdCode" label="系统ICD编码" show-overflow-tooltip width="100" />
          <el-table-column label="妊娠标记" show-overflow-tooltip width="120">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.isHy"
                @change="EditDiagisHy(scope.row.id, $event)"
                size="small"
              >
                <el-option
                  v-for="item in isHyData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="感染类型" show-overflow-tooltip width="150">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.grlx"
                @change="EditDiaggrlx(scope.row.id, $event)"
                size="small"
              >
                <el-option
                  v-for="item in grlxData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <!-- {{(scope.row.sfps==1)?'是':'否'}} -->
            </template>
          </el-table-column>
          <el-table-column label="配对状态" show-overflow-tooltip width="80">
            <template
              slot-scope="scope"
            >{{(scope.row.matchState==0)?'未配对':(scope.row.matchState==1)?'已配对':'无法配对'}}</template>
          </el-table-column>
          <el-table-column label="配对人员/时间" show-overflow-tooltip>
            <template slot-scope="scope">{{scope.row.matchUser}}/{{getDate(scope.row.matchTime)}}</template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[50, 100, 200]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.total"
            background
          ></el-pagination>
        </div>
      </div>
    </el-card>
    <el-dialog
      title="疾病配对"
      :visible.sync="dialogDiseaseVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-card class="dialog-card">
        <div slot="header" class="Card_title">
          <span>本院疾病信息</span>
        </div>
        <div slot="header" class="Card_title" style="border-left:1.5px solid rgb(192, 192, 192);">
          <span>配对疾病信息</span>
        </div>
        <div class="Card_body">
          <el-form
            :inline="true"
            :model="dialogData"
            style="text-align:center"
            class="demo-form-inline"
          >
            <el-form-item label="疾病名称">
              <el-input v-model="dialogData.zdmc" size="mini"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="Card_body" style="border-left:1.5px solid rgb(192, 192, 192);">
          <el-form
            :inline="true"
            :model="dialogData"
            style="text-align:center"
            class="demo-form-inline"
          >
            <el-form-item label="疾病名称">
              <el-input v-model="dialogData.mdhsIcdName" size="mini"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>

      <el-card class="dialog-card2" style="margin-top: 12px;">
        <div class="Card_body2" style="height:40px">
          <el-form
            :inline="true"
            :model="dialogData"
            style="margin-left:15px"
            class="demo-form-inline"
          >
            <el-form-item label="ICD编码、名称">
              <el-input v-model="dialogData.srm" clearable size="mini"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="dialogSearch()">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          :data="dialogData.DiseaseListData"
          height="261"
          border
          size="mini"
          style="width: 100%"
        >
          <el-table-column label width="35">
            <template slot-scope="scope">
              <el-radio :label="scope.row.id" v-model="dialogData.dataIcdId "></el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="icdCode" label="疾病ICD编码" width="180"></el-table-column>
          <el-table-column prop="icdName" label="疾病名称"></el-table-column>
        </el-table>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" size="mini" @click="SaveNoEditDiagDise()">疾病无法配对</el-button>
        <el-button type="success" size="mini" @click="SaveEditMatch">保存配对</el-button>
        <el-button size="mini" @click="dialogDiseaseVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDiagmatchList,
  getdate,
  EditDiagisHy,
  EditDiaggrlx,
  EditDiagDiseaseMatch,
  getDiagSearch,
  SaveEditDiagDise,
  SaveNoEditDiagDise
} from "@/api/rad";

export default {
  data() {
    return {
      // 列表的参数对象
      queryInfo: {
        srm: "",
        match_state: "",
        // 当前的页数
        pagenum: 1,
        // 当前页显示多少数据
        pagesize: 50
      },
      // 是否是妊娠期诊断 0 不是 1是
      isHyData: [
        {
          value: 0,
          label: "不是"
        },
        {
          value: 1,
          label: "是"
        }
      ],
      // 感染类型（-1未确定 1.非感染性疾病，2.细菌感染，3.真菌感染，4.结核/麻风感染，5.病毒感染，6.其他感染 ）
      grlxData: [
        {
          value: -1,
          label: "未确定"
        },
        {
          value: 1,
          label: "非感染性疾病"
        },
        {
          value: 2,
          label: "细菌感染"
        },
        {
          value: 3,
          label: "真菌感染"
        },
        {
          value: 4,
          label: "结核/麻风感染"
        },
        {
          value: 5,
          label: "病毒感染"
        },
        {
          value: 6,
          label: "其他感染"
        }
      ],
      MatchOptions: [
        {
          value: "",
          label: "全部"
        },
        {
          value: 1,
          label: "已配对"
        },
        {
          value: 0,
          label: "未配对"
        },
        {
          value: -1,
          label: "无法配对"
        }
      ],
      DiseasematchList: [],
      // 配对弹窗
      dialogDiseaseVisible: false,
      total: 0,
      SearchKey: "",
      dialogData: {
        id: "",
        zdmc: "",
        mdhsIcdName: "",
        dataIcdId: "",
        DiseaseListData: [],

        srm: ""
      }
    };
  },

  created: function() {
    this.getDiagmatchList();
  },
  methods: {
    // 监听pagesize改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getDiagmatchList();
    },
    // 当前展示的页面
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      // console.log(newPage)
      this.getDiagmatchList();
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    close() {
      this.$confirm("确定疾病无法配对?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.SaveNoEditDiagDise();
        })
        .catch(() => {});
    },
    // api
    async getDiagmatchList() {
      let _this = this;
      // console.log(this)
      // console.log(_this)
      let res = await this.$rad.getDiagmatchList({
        // srm: _this.queryInfo.srm,
        srm: this.queryInfo.srm,
        match_state: this.queryInfo.match_state,

        page: _this.queryInfo.page,
        pageSize: _this.queryInfo.pageSize
      });
      console.log(res);
      this.DiseasematchList = res.rows;
      this.total = res.total;
      // console.log(this.total)
    },
    //获取搜索列表
    async getSearchDiseaseList(data) {
      this.queryInfo.srm = data.srm;
      this.queryInfo.match_state = data.match_state;
      // console.log(this.queryInfo);
      this.getDiagmatchList();
    },
    //时间戳转时间
    getDate(data) {
      return this.$rad.getdate(data);
    },
    // 更改妊娠标记
    async EditDiagisHy(TypeId, e) {
      var res = await this.$rad.EditDiagisHy({
        id: TypeId,
        isHy: e
      });
      console.log(res.code);
      if (res.code == 1) {
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
        this.getDrugRouteList();
      }
    },
    // 更改感染类型
    async EditDiaggrlx(TypeId, e) {
      var res = await this.$rad.EditDiaggrlx({
        id: TypeId,
        grlx: e
      });
      console.log(res.code);
      if (res.code == 1) {
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
        this.getDiagmatchList();
      }
    },
    async EditDiagDiseaseMatch(id) {
      this.dialogData.id = id;
      let res = await this.$rad.EditDiagDiseaseMatch({
        id: id
      });
      console.log(res);
      this.dialogData.zdmc = res.zdmc;
      this.dialogData.mdhsIcdName = res.mdhsIcdName;
      this.dialogData.srm = this.dialogData.zdmc;
      this.dialogDiseaseVisible = true;
      this.dialogSearch();
    },
    async dialogSearch() {
      let res = await this.$rad.getDiagSearch({
        srm: this.dialogData.srm,
        id: this.dialogData.id
      });
      console.log(res);
      this.dialogData.DiseaseListData = res;
    },
    async SaveEditMatch() {
      if (this.dialogData.dataIcdId == "") {
        this.$message.error("未选中配对项");
      } else {
        let res = await this.$rad.SaveEditDiagDise({
          id: this.dialogData.id,
          dataIcdId: this.dialogData.dataIcdId
        });
        console.log(res);
        if (res.code == 1) {
          this.dialogDiseaseVisible = false;
          this.getDiagmatchList();
          return this.$message({
            type: "success",
            message: res.msg
          });
        } else {
          return this.$message({
            type: "error",
            message: res.msg
          });
        }
      }
    },
    open() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    clearEvent() {},
    getSearchList() {
      this.getDiagmatchList();
    },
    async SaveNoEditDiagDise() {
      let res = await this.$rad.SaveNoEditDiagDise({
        id: this.dialogData.id
      });
      if (res.code == 1) {
        this.dialogDiseaseVisible = false;
        this.getDiagmatchList();
        return this.$message({
          type: "success",
          message: res.msg
        });
        this.dialogDiseaseVisible = false;
      } else {
        return this.$message.error(res.$message);
      }
    }
  }
};
</script>
<style scoped>
.SearchCard {
  height: 50px;
  font-size: 12px;
}
.SearchTitle {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #c2c2c2;
}
.SearchLable {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-page {
  font-size: 12px;
}
.el-card {
  margin-left: 3px;
}
.tableStyle {
  width: 100%;
  height: 100%;
}
.card-table {
  width: 100%;
  height: 75%;
}
.block {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
/* dialog样式 */
.dialog-card >>> .el-card__body {
  padding: 0px 0px;
  width: 100%;
  height: 50px;
  display: flex;
  flex: 1;
  /* background-color: red; */
}
.dialog-card >>> .el-card__header {
  padding: 0px 0px;
  display: flex;
  flex: 1;
}
.dialog-card >>> .Card_title {
  width: 50%;
  height: 25px;
  background-color: #c6e2ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog-card >>> .Card_body {
  width: 50%;
  /* margin-left: 15px; */
  margin-right: 15px;
}
.dialog-card2 >>> .el-card__body {
  padding: 0px 0px;
  width: 100%;
  height: 300px;

  /* background-color: red; */
}
.dialog-card2 >>> .dialogSearch {
  height: 50px;
  display: flex;
  align-items: center;
}
.el-table >>> .el-button {
  font-size: 12px;
}
.block >>> .el-input__inner .el-pagination {
  font-size: 12px;
}
</style>
